<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">用户账目明细</li>
                        </ul>
                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">

                            <div class="layui-tab-item layui-show">

                                <div style="margin-top: 5px;margin-bottom: 10px">

                                    <div class="layui-inline" style="float: right">
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item" style="margin-bottom: 0px">

                                                <div class="layui-inline" style="margin-right: 0px">
                                                    <!--<label class="layui-form-label">密码</label>-->
                                                    <div class="layui-input-inline" style="width: 200px;">
                                                        <input type="text" name="user_id" autocomplete="off"
                                                               placeholder="用户名"
                                                               class="layui-input">
                                                    </div>
                                                    <div class="layui-input-inline" style="width: 200px;">
                                                        <select name="sign" lay-verify="required" lay-search="">
                                                            <option value="2">全部</option>
                                                            <option value="1">收入</option>
                                                            <option value="0">支出</option>
                                                        </select>
                                                    </div>
                                                    <div class="layui-input-inline" style="width: 200px;">
                                                        <select name="type" lay-verify="required" lay-search="">
                                                            <option value="0">全部</option>
                                                            <option value="1">积分</option>
                                                            <option value="2">余额</option>
                                                            <option value="3">微信</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-inline" style="margin-right: 0px">
                                                    <div class="layui-btn-group layui-inline" style="margin: 0px">
                                                        <!--此重置 仅仅是个跳转链接-->
                                                        <button  onclick="go('log')" class="layui-btn layui-btn-primary">重置</button>
                                                        <button class="layui-btn layui-btn-normal" lay-submit
                                                                lay-filter="formDemo"><i class="layui-icon">&#xe615;</i>查找
                                                        </button>
                                                    </div>
                                                </div>

                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="layadmin-trailer ">


                                    <table class="layui-table" lay-skin="line">

                                        <thead>
                                        <tr>
                                            <th style="width: 5%"></th>
                                            <th>用户名</th>
                                            <th>标记</th>
                                            <th>数量</th>
                                            <th>类型</th>
                                            <th>内容</th>
                                            <th>创建时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item,index) in items" :data_id="item.id">
                                            <td style="width: 20px;text-align: center">
                                                <input type="checkbox" class="vue_index" name="id" :value="item.id"
                                                       style="zoom: 150%">
                                            </td>
                                            <td>{{item.nickname}}</td>
                                            <td>{{item.sign}}</td>
                                            <td>{{item.number}}</td>
                                            <td>{{item.type}}</td>
                                            <td>{{item.content}}</td>
                                            <td>{{item.create_time}}</td>
                                        </tr>

                                        </tbody>
                                    </table>


                                </div>
                                <div id="demo7"></div>
                            </div>


                        </div>
                    </div>


                </div>


            </div>

        </div>


    </div>
</div>

<script>
    //vue对象
    var app = new Vue({
        el: '#app',
        data: {
            check: [],
            curr: 1,//当前页
            limit: 10,//当前页展示条数
            items: []
        }
    });

    //初始数据
    function init() {
        console.log("初始化");
        console.log("当前页展示条数"+app.limit);
        console.log("当前页"+app.curr);
        layer.load(2);
        $.get('/admin/sunfc.Point/log',
            {page: app.curr, limit: app.limit},
            function (res) {
                layer.closeAll();
                console.log(res.data);
                // return false;
                app.items = res.data;
            }
        );
    }

    //按需引入layui模块,此时为全部引入 laypage layer table element四个模块
    layui.use(['laypage', 'layer','table','element'], function () {
        //实例化
        var laypage = layui.laypage,
            layer = layui.layer;
        var table = layui.table;
        var elemnet = layui.element;
        //使用完整功能
        laypage.render({
            elem: 'demo7',//指向存放分页的容器
            count: "{$count}",//数据总数。一般通过服务端得到
            limits: [10, 20],
            layout://自定义排版。可选值有以下
                [
                    'count',//count（总条目输区域）
                    'prev',//prev（上一页区域）
                    'page',//page（分页区域）
                    'next',//next（下一页区域）
                    'limit',//limit（条目选项区域）
                    'skip'//skip（快捷跳页区域）
                ],
            jump: function (obj) {
                console.log(obj);
                app.curr = obj.curr;
                app.limit = obj.limit;
                init();
            }
        });

    });

    //按需引入layui的form模块
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            if (!data.field.user_id) {
                // layer.msg(3);
                return false;
            }
            layer.load(2);
            $.get('/admin/sunfc.Point/cases_search', data.field,
                function (res) {

                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage;
                        //完整功能
                        laypage.render({
                            elem: 'demo7',
                            count: res.total,
                            limits: [10, 20],
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                            jump: function (obj) {
                                console.log(obj)
                                app.curr = obj.curr;
                                app.limit = obj.limit;
                                layer.load(2);
                                $.get('/admin/sunfc.Point/cases_search', {
                                        page: app.curr,
                                        limit: app.limit,
                                        type: data.field.type,
                                        user_id: data.field.user_id,
                                        sign: data.field.sign
                                    },
                                    function (res) {
                                        layer.closeAll();
                                        app.items = res.data;
                                    }
                                );
                            }
                        });
                    });
                }
            );
            return false;
        });
    });
</script>



</body>
</html>




